<template>
  <div class="f-all">
    <div class="f-zi">个人中心</div>
    <div class="f-one">
      <div class="f-tou">
        <img :src="this.img[0].name" class="f-tou-img" style="width:143px; height:152px" />
        <el-upload
          class="upload-demo"
          action="api/pic/load"
          :headers="userToken"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-success="handleSuccess"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :show-file-list="false"
        >
          <el-button type="primary" size="mini">
            修改头像
            <i class="el-icon-upload el-icon--right"></i>
          </el-button>
        </el-upload>
      </div>
      <div class="f-tou2">
        <p>
          用户名:
          <span>{{this.username}}</span>
        </p>
        <p>
          注册时间:
          <span>{{this.admin_time}}</span>
        </p>
        <p>
          上次登录时间:
          <span>{{this.admin_lastlogintime}}</span>
        </p>
      </div>
    </div>
    <div class="f-two">
      <div class="f-two1">
        <span class="two1-zi">用户账号 :&nbsp; {{this.admin_account}}</span>
      </div>
      <div class="f-two1">
        <span class="two1-zi">用户职务 : &nbsp; {{this.job_name}}</span>
      </div>
      <div class="f-two1">
        <span class="two1-zi">所属单位 : &nbsp; {{this.group_name}}</span>
      </div>
      <!-- <div class="f-two1">
        <span class="two1-zi">登录密码 : &nbsp; {{this.admin_password}}</span>
      </div> -->
      <div class="f-two1">
        <span class="two1-zi">手机号码 : &nbsp; {{this.people_tele}}</span>
      </div>
      <div class="f-two1">
        <span class="two1-zi">注册时间 : &nbsp; {{this. admin_time}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import http from "../api";
export default {
  data() {
    return {
      username: "",
      userToken: {}, //usertoken的值
      img: [{ name: "" }],
      people_id: "",
      job_name: "", //职务名称
      group_name: "", //所属单位
      people_tele: "", //电话

      admin_time: "", //注册时间
      admin_password: "", //登录密码
      admin_account: "", //用户名
      admin_lastlogintime: "", //上次登陆时间
    };
  },
  mounted() {
    // 获取usertoken
    this.username = sessionStorage.getItem("people_name");
    this.userToken.userToken = sessionStorage.getItem("userToken");
    this.people_id = sessionStorage.getItem("people_id");
    http.getBuildPeople({ people_id: this.people_id }).then((r) => {
      console.log(r);
      this.job_name = r.data.buildJob.job_name;
      this.group_name = r.data.buildGroup.group_name;
      this.people_tele = r.data.people_tele;
      this.img[0].name = r.data.people_url;
      //   this.downinput = r.data;
      //   console.log(this.downinput);
    });
    http.getBuildAdmin({ people_id: this.people_id }).then((r) => {
      console.log(r);
      this.admin_time = r.data.admin_time;
      this.admin_password = r.data.admin_password;
      this.admin_account = r.data.admin_account;
      this.admin_lastlogintime = r.data.admin_lastlogintime;
      //   this.downinput = r.data;
      //   console.log(this.downinput);
    });
  },
  methods: {
    // 成功
    handleSuccess(res, file, fileList) {
      console.log("文件", res);
      this.img[0].name = r.name;
      // http.updPeopleUrl
      http
        .updPeopleUrl({
          people_id: sessionStorage.getItem("people_id"),
          people_url: sessionStorage.getItem("people_url"),
        }
        
        )
        .then((r) => {
          this.img[0].name = r.name;
          console.log(r)
        });
      this.$notify.success({
        title: "成功",
        message: `文件上传成功`,
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>
<style scoped>
.f-all {
  margin-top: 15px;
  width: 100%;
  /* width: 1300px; */
  height: 645px;
  background-color: white;
  overflow-y: scroll;
}
.f-zi {
  margin-top: 20px;
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-left: 15px;
}
.f-one {
  width: 93%;
  height: 230px;
  margin-left: 40px;
  /* background-color: burlywood; */
  margin-top: 20px;
  display: flex;
}
.upload-demo {
  margin-top: 20px;
  margin-left: 25px;
}
.f-tou {
  width: 155px;
  height: 170px;
  border: 1px solid rgb(221, 221, 221);
}
.f-tou-img {
  margin-top: 7px;
  margin-left: 5px;
}
.f-tou2 {
  width: 300px;
  height: 130px;
  /* background-color: chocolate; */
  margin-left: 10px;
  margin-top: 25px;
  font-size: 16px;
}
.f-two {
  width: 93%;
  margin-top: 10px;
  /* height: 200px; */
  /* background-color: chocolate; */
  margin-left: 37px;
}
.f-two1 {
  width: 100%;
  height: 55px;

  /* background-color: cornflowerblue; */
  border-top: 1px solid rgb(224, 224, 224);
}
.two1-zi {
  font-size: 17px;
  font-weight: 600;
  margin-top: 15px;
  display: block;
}
</style>